<template>
  <div class="music-list">
    <div class="back" @click="back">
      <i class="mui-icon mui-icon-back"></i>
    </div>
    <h1 class="title" v-html="title"></h1>
    <div class="bg-image" :style="bgStyle" ref="bgImage" @click="randoms">
      <div class="play-wrapper">
        <div class="play" v-show="songs.length > 0" ref="playBtn">
          <i class="mui-icon mui-icon-spinner mui-spin icon-play"></i>
          <span class="text">随机播放全部</span>
        </div>
      </div>
      <div class="filter" ref="filter"></div>
    </div>
    <div class="bg-layer" ref="layer"></div>
    <scroll :probe-type="probeType" :listen-scroll="listenScroll" @scroll="scroll" :data="songs" class="list" ref="list">
      <div class="song-list-wrapper">
        <song-list :songs="songs" @select="selectItem"></song-list>
      </div>
    </scroll>
  </div>
</template>

<script type="text/javascript">
import Scroll from '@/base/scroll/scroll'
import SongList from '@/base/song-list/song-list'
import { mapActions } from 'vuex'
import { playlistMixin } from '@/common/js/mixin'
// import Loading from '@/base/loading/loading'

const RESEVED_HEIGHT = 40
export default {
  mixins: [playlistMixin],
  name: 'MusicList',
  props: {
    bgImage: {
      type: String,
      default: ''
    },
    songs: {
      type: Array,
      default: () => { return [] }
    },
    title: {
      type: String,
      default: ''
    }
  },
  computed: {
    bgStyle () {
      return `background-image:url(${this.bgImage})`
    }
  },
  created () {
    this.probeType = 3
    this.listenScroll = true
    // console.log(3)
  },
  mounted () {
    this.imageHeight = this.$refs.bgImage.clientHeight
    this.minTranslateY = -this.imageHeight + RESEVED_HEIGHT
    this.$refs.list.$el.style.top = `${this.$refs.bgImage.clientHeight}px`
  },
  data () {
    return {
      scrollY: 0
    }
  },
  methods: {
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      this.$refs.list.$el.style.bottom = bottom
      this.$refs.list.refresh()
    },
    scroll (pos) {
      this.scrollY = pos.y
    },
    back () {
      this.$router.back()
    },
    selectItem (item, index) {
      this.selectPlay({
        list: this.songs,
        index
      })
      // console.log(this.songs)
    },
    randoms () {
      this.randomPlay({
        list: this.songs
      })
      console.log(7)
    },
    ...mapActions([
      'selectPlay',
      'randomPlay'
    ])
  },
  watch: {
    scrollY (newY) {
      var tranlateY = Math.max(this.minTranslateY, newY)
      var zIndex = 0
      var scale = 1
      var blur = 0
      this.$refs.layer.style.transform = `translate3D(0, ${tranlateY}px, 0)`
      this.$refs.layer.style.webkitTransform = `translate3D(0, ${tranlateY}px, 0)`
      var percent = Math.abs(newY / this.imageHeight)
      if (newY > 0) {
        scale = 1 + percent
        zIndex = 10
      } else {
        blur = Math.min(20 * percent, 20)
      }
      this.$refs.filter.style.backdropFilter = `blur(${blur})px`
      this.$refs.filter.style.webkitBackdropFilter = `blur(${blur})px`
      if (newY < this.minTranslateY) {
        zIndex = 10
        this.$refs.bgImage.style.paddingTop = 0
        this.$refs.bgImage.style.height = `${RESEVED_HEIGHT}px`
        this.$refs.playBtn.style.display = 'none'
      } else {
        this.$refs.bgImage.style.paddingTop = '75%'
        this.$refs.bgImage.style.height = 0
        this.$refs.playBtn.style.display = ''
      }
      this.$refs.bgImage.style.zIndex = zIndex
      this.$refs.bgImage.style.transform = `scale(${scale})`
      this.$refs.bgImage.style.webkitTransform = `scale(${scale})`
    }
  },
  components: {
    Scroll,
    SongList
  }
}
</script>

<style lang="less" scoped>
@import '~@/common/stylus/variable.less';

.music-list {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: @color-background;
  .header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 44px;
    color: #fff;
    z-index: 100;
    .back {
      position: absolute;
      top: 0;
      left: 4px;
      .fa-angle-left {
        padding: 5px 10px;
        font-size: 30px;
      }
    }
    .text {
      position: absolute;
      left: 38px;
      line-height: 44px;
      font-size: @font-size-medium-x;
      /*@include no-wrap()*/
    }
  }
  .list {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background: @color-background;
    .music-list-wrapper {
      .bg-image {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 75%;
        transform-origin: top;
        background-size: cover;
        background-position: 0 30%;
        .filter {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: black;
          opacity: 0.2;
        }
        .text {
          position: absolute;
          width: 80%;
          height: 40px;
          bottom: 50px;
          left: 15px;
          color: #fff;
          .play-count {
            position: absolute;
            bottom: -16px;
            font-size: @font-size-small;
          }
          .list-title {
            position: absolute;
            bottom: 0;
            font-size: @font-size-medium-x;
            line-height: 18px;
            font-weight: bold;
            letter-spacing: 1px;
          }
        }
      }
      .song-list-wrapper {
        padding: 41px 0 20px 0;
        border-radius: 10px;
        position: relative;
        top:-20px;
        background: @color-background;
        .sequence-play {
          position: absolute;
          // left: 8;
          top: 0px;
          display: flex;
          align-items: center;
          width: 100%;
          height: 40px;
          padding-left: 16px;
          border-bottom: 1px solid rgb(228, 228, 228);
          .iconfont {
            font-size: 18px;
            color: @color-text;
            padding-right: 14px;
          }
          .text {
            font-size: @font-size-medium-x;
          }
          .count {
            font-size: @font-size-medium;
            color: @color-text-g;
          }
        }
      }
      // position: fixed;
      // top: 0;
      // bottom: 0;
      // width: 100%;
      // background: $color-background;
      // height: 100%;
      // z-index: 20;
      // overflow: hidden;
        // padding: 5px 0 20px 0;
    }
  }
  .loading-content {
    position: fixed;
    width: 100%;
    top: 70%;
    transform: translateY(-50%);
  }
}
.list {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  background: @color-background;
}
.bg-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%;
  transform-origin: top;
  background-size: cover;
  background-position: 0 30%;
  /*z-index: 111;*/
}
.title {
  position: absolute;
  left: 38px;
  line-height: 44px;
  z-index: 222;
  font-size: @font-size-medium-x;
  color: red;
  /*@include no-wrap();*/
}
.back {
  position: absolute;
  top: 5px;
  left: 1px;
  padding: 5px 6px;
  font-size: 30px;
  z-index: 222;
}
.bg-layer {
  width: 100%;
  padding-top: 0.1px;
  height: 100%;
  background-color: #f1f1f1;
  z-index: 112;
}
.filter {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.2;
}
.play-wrapper {
  position: absolute;
  bottom: 20px;
  margin-left: 35%;
  width: 100%
}
.play {
  display: inline-block;
  border: 1px solid #ffff00cc;
  border-radius: 5px;
  text-align: center;
  /*padding-left: 50%;*/
  color: yellow;
}
.icon-play {
  font-size: 18px;
  color: yellow;
  padding-right: 14px;
}
</style>
